<template>
  <div>
    <ul class="tabbar">
      <router-link v-for="(item,index) in navbar" :key="index" :to="item.url" tag="li" activeClass="tbactive">
        <i class="iconfont" :class="item.iconfont"></i>
        <span>{{ item.title }}</span>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  data () {
    return {
      navbar: [
        { title: '首页', url: '/index', iconfont: 'icon-shouye' },
        { title: '分类', url: '/category', iconfont: 'icon-fenleishouye' },
        { title: '购物车', url: '/shopping', iconfont: 'icon-gouwuche' },
        { title: '消息', url: '/message', iconfont: 'icon-xiaoxi' },
        { title: '我', url: '/mine', iconfont: 'icon-wo' }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.tabbar{
  display: flex;
  position: fixed;
  bottom: 0px;
  width: 100%;
  background:white;
  padding: 3px 0px;
  li{
    display: flex;
    flex-direction: column;
    flex: 1;
    color: rgb(138,138,138);
    font-size: 12px;
    text-align: center;
    padding-bottom: 6px;
    .iconfont{
      margin-top: 6px;
      padding-bottom: 2px;
      font-size: 18px;
    }
  }
}
.tbactive{
  color: black!important;
}
</style>
